import { FormLabel } from '../form-label';
import React, { ReactNode } from 'react';
import { Select } from './select';
import { IFieldChange, Input } from './input';
import { IParamModelLiteData } from '@manycore/pages-vm-api';

export interface IFromField extends IFieldChange {
  field: IParamModelLiteData;
}

const isOptionField = (field: IParamModelLiteData) => {
  if (field.optionValues && field.optionValues.length) {
    return true;
  }
};

export function FormField(props: IFromField) {
  const { field, onChange } = props;

  let fieldNode: ReactNode = null;

  if (isOptionField(field)) {
    fieldNode = <Select field={field} onChange={onChange} />;
  } else if (['float', 'int'].includes(field.type)) {
    fieldNode = <Input field={field} onChange={onChange} />;
  }
  return <FormLabel label={field.displayName}>{fieldNode}</FormLabel>;
}
